<template>
    <div :class="`cb-${ dark()?'dark':'light' }`"
        style="display: inline-block;padding: 8px 12px;border: 1px solid rgba(0,0,0,0.08);font-size: 14px;border-radius: 12px;cursor: pointer;">
        <span class="cbInside"
            :style="{
                color: tool.getThemeColor('button.color')
            }"
        >
            <slot></slot>
        </span>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../tool'

const dark = tool.getIsDarkModeFunction()

onMounted(async () => {

})

</script>

<style scoped>
.cb-light {}

.cb-light:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.cb-light:active .cbInside {
    opacity: 0.75;
}
.cb-dark {}

.cb-dark:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.cb-dark:active .cbInside {
    opacity: 0.75;
}
</style>